<template>
    <div class="slider_wrap line">
        <ul class="items">
          <li v-for="(item,index) in itemList" :class="{'selected':index == selected}" @click="addClass(index)"><a >{{item.descr}}</a><span v-if="index !== itemList.length-1">&nbsp;>&nbsp;</span></li>        
        </ul>
    </div>
</template>

<script>
import Vue from "vue";


export default {
  name: "bread",
  components: {

  },
  props:{
      itemList:{
          type:Array,
          default:function(){
              return ["招商局",'招商局能源运输股份有限公司',"招商局能源运输股份有限公司A","招商局能源运输股份有限公司BC","招商局能源运输股份有限公司ejd","招商局能源运输股份有限公司ejd","招商局能源运输股份有限公司ejd","招商局能源运输股份有限公司ejd","招商局能源运输股份有限公司ejd"]
          }
      },
      selected:{
          type:Number,
          default:0
      }

  },
  data() {
    return {
    };
  },
  created() {
     
  },
  mounted(){
    //   this.selected = this.itemList.length - 1;
  },
  watch: {
  },
  computed: {

  },
  methods: {
    addClass:function(index){
        if (this.selected === index) {
            return;
        }
        this.$emit("returnChecked",index)
    }
  }
};
</script>

<style scoped="scoped">
    .slider_wrap.line{overflow:hidden;overflow-x:scroll;width:100%;-webkit-overflow-scrolling:touch;position:fixed;top:0;z-index:2000;}
    .slider_wrap.line li{display:inline-block;height:1rem;overflow:hidden;position:relative;background-color: #fff;}
    .slider_wrap::-webkit-scrollbar{display:none}
    .items a{color:#555;line-height:1rem;white-space:nowrap;display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);text-align:center;cursor:pointer;font-size: 0.32rem;}
    .items a:active{color:#f33}
    .items>li:last-child{padding-right:0.8rem;}
    .items{white-space:nowrap;padding:0 0.3rem;line-height:1.02rem;height:1.02rem;border-bottom:0.02rem solid #F3F3F3;background-color: #fff;}
    .items .selected a,.u_topmenu .items .selected a:visited,.items .selected a:link,.items .selected a:hover,.items .selected a:focus{color:#5DB6DA;font-size:0.32rem;}
                /*.items .selected{border-bottom: #ea4821 solid 2px;}*/
</style>

